<template>
  <div class="container">
    <div class="content">
      <div class="logo">
        <img src="../../static/img/home/logo.png" alt="">
      </div>
      <ul class="nav">
        <router-link active-class="active" :to="{path:'/home'}" tag="li">
            <a href="#">首页</a>
        </router-link>
        <router-link active-class="active" :to="{path:'/buyCar'}" tag="li">
            <a href="#">我要买车</a>
        </router-link>
        <router-link active-class="active" :to="{path:'/sellingCar'}" tag="li">
            <a href="#">我要卖车</a>
        </router-link>
        <li class="erBox">
            <a href="#">App下载</a>
            <img class="er" src="../../static/img/home/erweima.png" alt="">
        </li>
        <router-link active-class="active" :to="{path:'/login'}" tag="li" v-show="!isHid">
            <a href="" @click="ifId">登录/注册</a>
        </router-link>
        <router-link active-class="active" class="personal" :to="{path:'/personal'}" v-show="isHid" tag="li">
          <a href="" @click="personal" active-class="active" class="personal">
            <!-- {{userLis.nickname ? userLis.nickname : userLis.telphone}} -->
            {{userLis.telphone}}
            <img src="../../static/img/PersonalCenter/login_down_arrow.png" alt="">
          </a>
          <ol>
            <li @click="personal">个人中心</li>
            <li @click="exit">退出账户</li>
          </ol>
        </router-link>
        <p>
          <img src="../../static/img/home/home_nav_tel.png" alt="">
          <span>400-877-9737</span>
        </p>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isHid: false,
      userLis: {}
    }
  },
  created () {
    // 读取本地
    let storage = window.sessionStorage
    let json = storage.getItem('WSKuserLis')
    if (json) {
      let jsonObj = JSON.parse(json)
      this.userLis = jsonObj.data.data.user
    }
    if (this.userLis.id && this.userLis.id !== '') {
      this.isHid = true
    } else {
      this.isHid = false
    }
  },
  watch: {
    '$route' (val, oldVal) {
      // 读取本地
      let storage = window.sessionStorage
      let json = storage.getItem('WSKuserLis')
      if (json) {
        let jsonObj = JSON.parse(json)
        this.userLis = jsonObj.data.data.user
      }
      if (location.hash === '#/login/login') {
        this.isHid = false
        this.$router.push({path: '/login/login'})
      } else if (this.userLis.id && this.userLis.id !== '') {
        // this.$router.push({path: '/personal'})
        this.isHid = true
        // 读取本地
        let storage = window.sessionStorage
        let json = storage.getItem('WSKuserLis')
        let jsonObj = JSON.parse(json)
        if (jsonObj) {
          this.userLis = jsonObj.data.data.user
        }
      }
    }
  },
  methods: {
    // 退出
    exit () {
      sessionStorage.removeItem('WSKuserLis')
      this.userLis = ''
      this.$router.push({path: '/login/login'})
    },
    personal () {
      this.$router.push({path: '/personal'})
    },
    ifId () {
      // this.$router.push({path: '/login/login'})
    }
  }
}
</script>
<style lang="scss" scoped>
.active{
  a{
    color: #ff6f3c;
  }
  color: #ff6f3c;
}
.er{
  display: none;
  position: absolute;
  z-index: 100;
  top:60px;
}
.erBox{
  position: relative;
  img{
    width: 150px;
    height: 150px;
  }
}
.erBox:hover .er{
  display: block;
}
.container{
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #f4f4f4;
  .content{
    width: 1200px;
    height: 70px;
    line-height: 70px;
    margin: 0 auto;
    .logo{
      float: left;
      img{
        margin-top: 10px;
      }
    }
    .nav{
      float: right;
      ol{
        float: left;
      }
      .personal{
        position: relative;
        &:hover ol{
          display: block;
        }
        img{
          float: right;
          position: absolute;
          width: 6px;
          top: 50%;
          margin-top: -3px;
          right: 0;
        }
        ol{
          display: none;
          position: absolute;
          text-align: center;
          width: 108px;
          height: 78px;
          border: 1px solid #e3e3e3;
          border-radius: 4px;
          top: 50px;
          background: #fff;
          z-index: 1000;
          li{
            height: 39px;
            line-height: 39px;
            font-size: 14px;
            color: #333;
            cursor: pointer;
            &:hover{
              background: #fafafa;
              color: #ff6f3c;
            }
          }
        }
      }
      &>li{
        text-align: center;
        float: left;
        width: 110px;
        height: 70px;
        color: #333;
        cursor: pointer;
        font-size: 14px;
        a{
          display: inline-block;
          width: 100%;
          height: 100%;
          overflow: hidden;
          white-space:nowrap;
          text-overflow:ellipsis;
        }
        &:visited {
          color: #333;
        }
        &:active a{color: #ff6f3c;}
        &:hover a{
          outline:none;
          color: #ff6f3c;
        }
      }
      p{
        float: right;
        margin-left: 50px;
        color: #ff6f3c;
        font-size: 16px;
        img{
          vertical-align: -5px;
          width: 16px;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
